
// 逻辑代码
// 0. 获取元素
// 0-1. 分类列表 ul
const cateBox = document.querySelector('.cate')
// 0-2. 品牌列表
const propsBox = document.querySelector('.props')
// 0-3. 分页盒子
const pageBox = document.querySelector('.btn-box')
// 0-4. 商品列表
const goodsBox = document.querySelector('.list-box')
// 0-5. 获取整体盒子
const box = document.querySelector('.container')

// 1. 准备一个参数的数据集合
const params = {
  q: '*',
  cate: '',
  props: '',
  sort: '',
  page: 0,
  callback: 'fn'
}

// 准备一个变量, 表示商品列表
let goodsList = []

// 功能函数, queryStringify()
function queryStringify(obj) {
  let str = ''

  for (let k in obj) {
    str += k + '=' + obj[k] + '&'
  }

  return str.slice(0, -1)
}

// 2. 请求数据的函数
getList()
function getList() {
  // jsonp 利用的是 script 标签的 src 属性
  // 前端提前准备好回调函数
  // 2-1. 创建一个 script 标签
  const script = document.createElement('script')
  // 2-2. 手动添加 src 属性
  script.src = `https://search.mall.360.cn/search/q?${queryStringify(params)}`
  // 2-3. 把 script 标签插入到页面内
  document.body.appendChild(script)
  // 2-4. 把 script 标签删除
  script.remove()
}
function fn(res) {
  console.log(res)
  bindCateList(res.data.cates.subs)
  res.data.options[0] && bindPropsList(res.data.options[0].subs)
  bindPagenation(res.total)
  bindGoodsList(res.data.list)
  goodsList = res.data.list
}

function bindCateList(list) {
  let str = ''
  list.forEach(item => {
    str += `
      <a class="cate_item" data-value="${item.value}">${item.text}</a>
    `
  })
  cateBox.innerHTML = str
}

function bindPropsList(list) {
  let str = ''
  list.forEach(item => {
    str += `
      <a class="props_item" data-value="${item.value}">${item.text}</a>
    `
  })
  propsBox.innerHTML = str
}

function bindPagenation(total) {
  const num = Math.ceil(total / 20)
  let str = `
   <li class="first">首页</li>
   <li class="prev">上一页</li>
 `
  for (let i = 0; i < num; i++) {
    str += `<li class="page-item" data-value="${i}">${i + 1}</li>`
  }
  str += `
   <li class="next">下一页</li>
   <li class="last">尾页</li>
  `

  pageBox.innerHTML = str
}

function bindGoodsList(list) {
  console.log(list)
  let str = ''

  list.forEach(item => {
    str += `
       <li data-id="${item.itemId}">
             <div class="pic">
                 <img src="${item.img}" alt="">
             </div>
                 <p>${item.title}</p>
                 <span>${(item.price / 100).toFixed(2)}</span>
             <button class="adbt" data-id="${item.itemId}">加入购物车</button>
         </li>
    `
  })

  goodsBox.innerHTML = str
}

box.addEventListener('click', e => {
  const t = e.target

  if (t.className === 'cate_item') {
    params.cate = t.dataset.value
    params.page = 0
    getList()
  }

  if (t.className === 'props_item') {
    params.props = t.dataset.value
    params.page = 0
    getList()
  }

  if (t.className === 'sort_item') {
    params.sort = t.dataset.value
    getList()
  }
})

var current = 1
var pagesize = 20
pageBox.addEventListener('click', e => {
  const t = e.target
  if (t.className === 'first') {
    params.page = t.dataset.value
  }

  if (t.className === 'next') {
    var totalPage = Math.ceil(146 / pagesize)
    if (current === totalPage) return
    current++
    params.page = current
    getList()
  }

  if (t.className === 'prev') {
    if (current === 1) return
    current--
    params.page = current - 1
    getList()
  }
  if (t.className === 'page-item') {
    params.page = t.dataset.value
    getList()
  }
})

const sortBtn = document.querySelector('.nav > .ctn > .sort > .bar > .search')
sortBtn.onclick = function () {
  params.q = this.previousElementSibling.value.trim()
  params.page = 0
  getList()
}

goodsBox.addEventListener('click', e => {
  if (e.target.nodeName === 'LI') {
    const goodsId = e.target.dataset.id
    console.log(goodsId)
    window.sessionStorage.setItem('goodsId', goodsId)
    window.location.href = './detail.html'
    const info = goodsList.find(item => item.itemId === goodsId)
    console.log(info)
  }
  if (e.target.nodeName === 'BUTTON') {
    const goods_id = e.target.dataset.id
    console.log(goods_id)
    window.sessionStorage.setItem('goods_id', goods_id)
  }
})
